App.require(["matrix3"], function (matrix3) {
    var Matrix3 = matrix3.Matrix3;
    App.defineWidget("image", {
        initialize: function () {
            var style = this.style, that = this;
            this.image = new Image();
            if (style.url) {
                this.image.src = style.url;
                this.image.onload = function () {
                    that.getScene().nextRender();
                };
            }
        },
        render: function (ctx) {
            ctx.save();
            var image = null;
            if (this.image.src && this.image.complete) image = this.image;
            else image = App.globalImage;
            var style = this.style;
            var shadowObj = App.Widget.strToShadow(style.shadow);
            if (shadowObj) {
                ctx.shadowOffsetX = shadowObj.x;
                ctx.shadowOffsetY = shadowObj.y;
                ctx.shadowBlur = shadowObj.blur;
                ctx.shadowColor = shadowObj.color;
            }
            var transforms = App.Widget.strToTransform(style.transform);
            if (transforms) {
                for (var i = 0; i < transforms.length; i++) {
                    var tranObj = transforms[i];
                    ctx[tranObj.key].apply(ctx, tranObj.param);
                }
            }
            var w = style.width || image.width, h = style.height || image.height;
            if (style.sx && style.sy && style.sw && style.sh) {
                ctx.drawImage(image, style.sx, style.sy, style.sw, style.sh, style.x, style.y, w, h);
            }
            else {
                ctx.drawImage(image, style.x, style.y, w, h);
            }
            ctx.restore();
        },
        createPath: function (ctx) {
            var style = this.style;
            var image = null;
            if (this.image.src && this.image.complete) image = this.image;
            else image = App.globalImage;
            var w = style.width || image.width, h = style.height || image.height;
            ctx.beginPath();
            ctx.rect(style.x, style.y, w, h);
        },
        isPointIn: function (ctx, x, y) {
            this.createPath(ctx);
            return ctx.isPointInPath(x, y);
        },
        style: {
            transform: [], 
            width: "",
            height: "",
            x: 0,
            y: 0,
            sx: "",
            sy: "",
            sw: "",
            sh: "",
            shadow: "0 0 0 black",
            url: "",
            opacity: 1,
            position: App.PositionOption.LEFTBOTTOM,
        },
        resourceKey: [
            { key: "url", type: "images" }
        ],
        get url() {
            return this.style.url;
        },
        set url(val) {
            this.style.url = val;
            this.image = new Image();
            this.image.src = val;
            var that = this;
            this.image.onload = function () {
                that.getScene().nextRender();
            };
        },
        get transform() {
            return this.style.transform;
        },
        set transform(val) {
            this.style.transform = val;
            this.getScene().nextRender();
        },
        get width() {
            return this.style.width;
        },
        set width(val) {
            this.style.width = val;
            this.getScene().nextRender();
        },
        get height() {
            return this.style.height;
        },
        set height(val) {
            this.style.height = val;
            this.getScene().nextRender();
        },
        get x() {
            return this.style.x;
        },
        set x(val) {
            this.style.x = val;
            this.getScene().nextRender();
        },
        set y(val) {
            this.style.y = val;
            this.getScene().nextRender();
        },
        get y() {
            return this.style.y;
        },
        set shadow(val) {
            this.style.shadow = val;
            this.getScene().nextRender();
        },
        get shadow() {
            return this.style.shadow;
        },
        get sx() {
            return this.style.sx;
        },
        set sx(val) {
            this.style.sx = val;
            this.getScene().nextRender();
        },
        get sy() {
            return this.style.sy;
        },
        set sy(val) {
            this.style.sy = val;
            this.getScene().nextRender();
        },
        get opacity() {
            return this.style.opacity;
        },
        set opacity(val) {
            this.style.opacity = val;
            this.getScene().nextRender();
        },
        get sw() {
            return this.style.sw;
        },
        set sw(val) {
            this.style.sw = val;
            this.getScene().nextRender();
        },
        get sh() {
            return this.style.sh;
        },
        set sh(val) {
            this.style.sh = val;
            this.getScene().nextRender();
        },
        get position() {
            return this.style.position;
        },
        set position(val) {
            this.style.position = val;
            this.getScene().nextRender();
        }
    })
})